<template>
	<view>
		<!-- 鸽笼信息 -->
		<!-- <view class="cage">
			<view class="cagePosition">{{cage.cagePosition}}</view>
			<view>开始时间:{{cage.adoptionStartTime}}</view>
			<view>认养周期:{{cage.adoptionTime}}</view>
			<view>结束时间:{{cage.adoptionEndTime}}</view>
			<view v-if="cage.layEggTime">最新下蛋时间:{{cage.layEggTime}}</view>
			<view>鸽仔数量:{{cage.cubNumber}}</view>
		</view>
		<view class="center"> -->
		<!--种鸽所在棚信息 -->
		<!-- 	<view class="shedInfo" v-if="shedEnvironmentData.length > 0">
				<view class="iconfont icon-wenshidapeng title">鸽棚环境数据</view>
				<view class="infoList">
					<view class="info" v-for="(data,index) in shedEnvironmentData" :key="index">
						{{data.dataname}}: {{data.datavalue}}{{data.dataunit}}
					</view>
				</view>
			</view> -->
		<!-- 下蛋记录 -->
		<!-- <view class="layEggRecord">
				<view class="iconfont icon-dan title">鸽子下蛋记录</view>
				<view class="list">
					<u-empty v-if="layEggRecord.length==0" mode="history">
					</u-empty>
					<view v-for="(record,index) in layEggRecord" :key="index" class="item">
						{{record.layEggTime}}
					</view>
				</view>
			</view> -->
		<!-- </view> -->
		<!-- <video class="shedVideo" :autoplay="true" src="rtmp://rtmp01open.ys7.com/openlive/2929fb95448f496d98a964d09a9b43f9"></video> -->
		<!-- 鸽笼信息框 -->
		<view class="cageInfo">
			<view class="cagePosition">{{cage.cagePosition}}</view>
			<view>开始时间:{{cage.adoptionStartTime}}</view>
			<view>认养周期:{{cage.adoptionTime}}</view>
			<view>结束时间:{{cage.adoptionEndTime}}</view>
			<view v-if="cage.layEggTime">最新下蛋时间:{{cage.layEggTime}}</view>
			<view>鸽仔数量:{{cage.cubNumber}}</view>
		</view>
		<image src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/cage%28four%29.png" class="cage" />
		<view class="bottomMean">
			<view class="shed" @click="openShedInfo" >
				<text>鸽棚信息</text>
				<image src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/shed.png"/>
			</view>
			<view class="egg" @click="openLayEggRecord">
				<text>下蛋记录</text>
				<image src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/egg6.png" />
			</view>
			<view class="squab" @click="openOutShellRecord">
				<text>出壳记录</text>
				<image src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/squab.png" />
			</view>
		</view>
		<uni-popup ref="shedInfoPopup">
			<view class="shedInfo">
				<view class="title">{{shedName+' '}}实时环境数据</view>
				<view class="infoList">
					<view class="info" v-for="(data,index) in shedEnvironmentData" :key="index">
						{{data.dataname}}: {{data.datavalue}}{{data.dataunit}}
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="layEggRecordPopup">
			<view class="layEggRecord">
					<view class="iconfont icon-dan title">鸽子下蛋记录</view>
					<view class="list">
						<u-empty v-if="layEggRecord.length==0" mode="history">
						</u-empty>
						<view v-for="(record,index) in layEggRecord" :key="index" class="item">
							{{record.layEggTime}}
						</view>
					</view>
				</view>	
		</uni-popup>
		<uni-popup ref="outShellRecordPopup">
			<view class="outSheelRecord">
					<view class="iconfont icon-dan title">乳鸽出壳记录</view>
					<view class="list">
						<u-empty v-if="outSheelRecord.length==0" mode="history">
						</u-empty>
						<view v-for="(record,index) in outSheelRecord" :key="index" class="item">
							{{record.outSheelTime}}
						</view>
					</view>
				</view>	
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//下蛋记录
				outSheelRecord:[],
				layEggRecord: [],
				cubChangeRecord: [],
				shedName: '',
				cage: {},
				rid: 0,
				//种鸽信息
				pigeonInfo: {},
				//棚信息
				shedEnvironmentData: [],
				shedInfoShow: false
			}
		},
		onLoad(options) {
			this.cage = JSON.parse(decodeURIComponent(options.cage));
			this.getShedEnvironmentByShedId();
			this.getShedName();
			this.getLayEggRecord();
		},
		methods: {
			//获取鸽棚名称
			getShedName() {
				const strs = this.cage.cagePosition.split(' ');
				this.shedName = strs[0] + ' ' + strs[1];
			},
			//获取鸽棚环境数据
			async getShedEnvironmentByShedId() {
				const res = await this.$myRequest({
					url: 'adoption/shedEnvironment/getShedEnvironmentByShedId/' + this.cage.shedId
				})
				if (res && res.code === 0 && res.data) {
					this.shedEnvironmentData = res.data;
				}
			},
			// 获取下蛋记录
			async getLayEggRecord() {
				const res = await this.$myRequest({
					url: 'adoption/cage/getLayEggRecordByCageId/' + this.cage.cageId
				})
				if (res && res.code === 0) {
					this.layEggRecord = res.data;
				}
			},
			//打开shedInfo
			openShedInfo() {
				this.$refs.shedInfoPopup.open()
			},
			openLayEggRecord(){
				this.$refs.layEggRecordPopup.open()
			},
			openOutShellRecord(){
				this.$refs.outShellRecordPopup.open()
			}
		}
	}
</script>


<style lang="scss">
	@import url("../../static/iconfont/iconfont.css");

	page {
		background: url('https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/bg.png') no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
	}

	.cageInfo {
		left: 125rpx;
		top: 180rpx;
		position: absolute;
		width: 500rpx;
		height: 350rpx;
		background-color: #FFF8DC;
		font-size: 35rpx;
		opacity: 0.8;
		border-radius: 10px;
		color: #8B4513;
		z-index: 2;
		padding: 10px;
	}

	.bottomMean {
		position: fixed;
		bottom: 70rpx;
		display: flex;
	}

	.cage {
		left: 75rpx;
		top: 400rpx;
		position: absolute;
		width: 600rpx;
		height: 600rpx;
	}

	.shed {
		margin: 0 50rpx 0 50rpx;
		width: 150rpx;
		height: 60rpx;
		font-size: 35rpx;
		text-align: center;

		image {
			width: 130rpx;
			height: 102rpx;
		}
	}

	.egg {
		width: 150rpx;
		height: 80rpx;
		font-size: 35rpx;
		margin: 0 50rpx 0 50rpx;
		text-align: center;

		image {
			width: 130rpx;
			height: 102rpx;
		}
	}

	.squab {
		width: 150rpx;
		font-size: 35rpx;
		height: 80rpx;
		margin: 0 50rpx 0 50rpx;
		text-align: center;

		image {
			width: 130rpx;
			height: 102rpx;
		}
	}

	.center {
		margin-top: 45rpx;
		display: flex;
	}

	.shedInfo {
		width: 600rpx;

		.title {
			text-align: center;
			font-size: 40rpx;
			color: white;
		}

		.infoList {
			background-color: #FFF8DC;
			border-radius: 10px;
			padding: 20rpx;

			.info {
				font-size: 30rpx;
				text-align: center;
			}
		}
	}

	.layEggRecord,.outSheelRecord{
		width: 320rpx;
		text-align: center;
		margin: 0 0 0 25rpx;

		.title {
			color: white;
		}

		.list {
			border-radius: 10px;
			background-color: #FFF8DC;
			min-height: 400rpx;
		}
	}
</style>
